<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-status="{scope}">
				<el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
				<el-tag v-else>禁用</el-tag>
			</template>

			<template #slot-filter>
				<div class="filter-bar">
					<span>联盟号筛选</span>

					<el-select
						size="mini"
						filterable
						placeholder="帐号筛选"
						v-model="selects.account"
						@change="val => crud.refresh({ accountId: val, page: 1 })"
					>
						<el-option value="" label="全部"></el-option>
						<el-option
							v-for="(item, index) in options.account"
							:key="index"
							:label="item.account"
							:value="item.id"
						></el-option>
					</el-select>
				</div>

				<div class="filter-bar">
					<span>数据平台筛选</span>

					<el-select
						size="mini"
						filterable
						placeholder="数据平台筛选"
						v-model="selects.app"
						@change="val => crud.refresh({ app2: val, page: 1 })"
					>
						<el-option value="" label="全部"></el-option>
						<el-option
							v-for="(item, index) in options.app"
							:key="index"
							:label="item.name"
							:value="item.key"
						></el-option>
					</el-select>
				</div>

				<div class="filter-bar">
					<span>状态筛选</span>

					<el-select
						size="mini"
						filterable
						placeholder="状态筛选"
						v-model="selects.status"
						@change="val => crud.refresh({ status: val, page: 1 })"
					>
						<el-option value="" label="全部"></el-option>
						<el-option value="1" label="启用"></el-option>
						<el-option value="0" label="禁用"></el-option>
					</el-select>
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
export default {
	data() {
		return {
			crud: null,
			options: {
				staff: [],
				account: [],
				app: []
			},
			selects: {
				account: '',
				app: '',
				status: ''
			}
		};
	},
	mounted() {
		this.$service.goodsMenagement.getTljAccountList.list().then(res => {
			this.options.account = res;
		});

		this.$service.common.userAppList().then(res => {
			this.options.app = res;
		});
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.goodsMenagement.getTljAccountPIDList)
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center',
							width: '60'
						},
						{
							label: 'AppKey',
							prop: 'appkey',
							align: 'center'
						},
						{
							label: 'AppSecret',
							prop: 'appsecret',
							align: 'center',
							width: 300
						},
						{
							label: '阿里妈妈广告位',
							prop: 'pid',
							align: 'center'
						},
						{
							label: '数据平台',
							prop: 'appName',
							align: 'center'
						},
						{
							label: '账号名称',
							prop: 'account',
							align: 'center'
						},
						{
							label: '登记时间',
							prop: 'createTime',
							align: 'center'
						},
						{
							label: '备注',
							prop: 'remark',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							width: '70px',
							align: 'center'
						}
					],
					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '90px',
						center: true,
						width: '600px',
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: '账户',
							prop: 'accountId',
							span: 12,
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择',
									filterable: true
								},
								props: {
									clearable: true
								},
								options: []
							},
							rules: {
								required: true,
								message: '请选择账户'
							}
						},
						{
							label: '广告位id',
							prop: 'pid',
							span: 22,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入id'
								}
							},
							rules: {
								required: true,
								message: '请输入id'
							}
						},
						{
							label: '备注',
							prop: 'remark',
							span: 22,
							component: {
								name: 'el-input'
							}
						},
						{
							label: '状态',
							prop: 'status',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '启用',
										value: 1
									},
									{
										label: '禁用',
										value: 0
									}
								]
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', async isedit => {
					let listArr = await this.$service.goodsMenagement.getTljAccountList.page({
						page: 1,
						size: 100,
						sort: 'desc',
						order: 'createTime',
						status: 1
					});
					let list = listArr.list.map(item => {
						return {
							label: item.account,
							value: item.id
						};
					});
					if (!isedit) {
						app.setForm('accountId', list[0].value);
					}

					this.crud.setData('upsert.items[prop:accountId].component.options', list);
				})
				.on('submit', (isOpen, data, { next }) => {
					data.pid = data.pid.trim();
					next({
						...data
					});
				})
				.done();

			app.refresh();
		}
	}
};
</script>

<style lang="scss" scoped>
.filter-bar {
	display: flex;
	align-items: center;
	margin-left: 10px;

	& > span {
		font-size: 12px;
		margin-right: 10px;
	}
}
</style>
